<template>
  <div>
    <p class="vc-mb-2">
      <select
        v-model="innerStyle['font-family']"
        class="vc-w-full vc-p-1 vc-rounded vc-border vc-border-solid vc-border-gray-200"
      >
        <option value="inhert">默认</option>
        <option v-for="el in fontFamilyData" :key="el">{{ el }}</option>
      </select>
    </p>
    <p>
      <button
        class="vc-btn vc-py-1"
        :class="{ 'vc-btn-blue': innerStyle['font-weight'] === 'bold' }"
        @click="updateStyle('font-weight', 'bold')"
      >
        <Icon name="bold" />
      </button>
      <button
        class="vc-btn vc-py-1 vc-mx-2"
        :class="{ 'vc-btn-blue': innerStyle['text-decoration'] === 'underline' }"
        @click="updateStyle('text-decoration', 'underline')"
      >
        <Icon name="underline" />
      </button>
      <button
        class="vc-btn vc-py-1"
        :class="{ 'vc-btn-blue': innerStyle['font-style'] === 'italic' }"
        @click="updateStyle('font-style', 'italic')"
      >
        <Icon name="italic" />
      </button>
      <input
        v-model="fontSize"
        class="vc-ml-1 vc-w-16 vc-border vc-border-solid vc-border-gray-200 vc-pl-1 vc-py-1 vc-rounded"
        type="number"
        @blur="fontSizeBlur"
      />
      px
    </p>
    <div class="vc-inline-flex vc-items-center vc-flex-row vc-w-full vc-mt-2 vc-h-8">
      <label class="vc-inline-block vc-flex-1">
        <input class="vc-align-middle vc-mr-1" type="checkbox" checked disabled />
        <span class="vc-align-middle">字体颜色</span>
      </label>
      <input v-model="innerStyle['color']" type="color" />
    </div>
    <div v-if="!hideBgBorder" class="vc-inline-flex vc-items-center vc-flex-row vc-w-full vc-mt-2 vc-h-8">
      <label class="vc-inline-block vc-flex-1">
        <input v-model="bgColorEnable" class="vc-align-middle vc-mr-1" type="checkbox" />
        <span class="vc-align-middle">背景颜色</span>
      </label>
      <input v-if="bgColorEnable" v-model="innerStyle['background-color']" type="color" />
    </div>
    <div v-if="!hideBgBorder" class="vc-inline-flex vc-items-center vc-flex-row vc-w-full vc-mt-2 vc-h-8">
      <label class="vc-inline-block vc-flex-1">
        <input v-model="borderColorEnable" class="vc-align-middle vc-mr-1" type="checkbox" />
        <span class="vc-align-middle">边框颜色</span>
      </label>
      <input v-if="borderColorEnable" v-model="innerStyle['border-color']" type="color" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { CSSProperties, nextTick, ref, watch } from "vue";
import Icon from "/@/components/base/Icon.vue";
const props = defineProps<{
  value: CSSProperties;
  enableEmptyStyle?: boolean;
  defaultValue?: CSSProperties;
  hideBgBorder?: boolean;
}>();
const emits = defineEmits(["update:value"]);

const fontFamilyData = ["Verdana", "Helvetica", "Times New Roman", "Garamond", "Comic Sans MS"];

function getStyleWithDefaults(style: CSSProperties) {
  return Object.assign(
    {
      color: "#000000",
      "font-family": "inhert",
    },
    props.defaultValue || {},
    style
  );
}
const innerStyle = ref<CSSProperties>({});
function updateStyle(key: string, value: string) {
  if (innerStyle.value[key]) {
    delete innerStyle.value[key];
  } else {
    innerStyle.value[key] = value;
  }
}
const minFontSize = 8;
const maxFontSize = 999;
function getFontSize() {
  const val = innerStyle.value["font-size"];
  if (val) {
    return parseInt(val + "");
  } else {
    if (props.enableEmptyStyle) {
      return "";
    } else {
      return minFontSize;
    }
  }
}
const fontSize = ref(getFontSize());
watch(fontSize, (v) => {
  if (v === "" && props.enableEmptyStyle) {
    delete innerStyle.value["font-size"];
  } else {
    if (v < minFontSize) {
      v = minFontSize;
    } else if (v > maxFontSize) {
      v = maxFontSize;
    }
    innerStyle.value["font-size"] = v + "px";
  }
  canTriggerValueWatch = false;
  nextTick(() => {
    canTriggerValueWatch = true;
  });
});
function fontSizeBlur() {
  if (fontSize.value === "" && props.enableEmptyStyle) {
    delete innerStyle.value["font-size"];
  } else {
    if (fontSize.value < minFontSize) {
      fontSize.value = minFontSize;
    } else if (fontSize.value > maxFontSize) {
      fontSize.value = maxFontSize;
    }
    innerStyle.value["font-size"] = fontSize.value + "px";
  }
}
let canTriggerInnerStyleWatch = true;
watch(
  innerStyle,
  (v) => {
    if (!canTriggerInnerStyleWatch) return;
    emits("update:value", { ...v });
  },
  {
    deep: true,
  }
);
let canTriggerColorEnable = true;
const bgColorEnable = ref(false);
watch(bgColorEnable, (v) => {
  if (!canTriggerColorEnable) return;
  if (v) {
    innerStyle.value["background-color"] = "#f2f2f2";
  } else {
    delete innerStyle.value["background-color"];
  }
});
const borderColorEnable = ref(false);
watch(borderColorEnable, (v) => {
  if (!canTriggerColorEnable) return;
  if (v) {
    innerStyle.value["border-color"] = "#333333";
    innerStyle.value["border-width"] = "1px";
    innerStyle.value["border-style"] = "solid";
  } else {
    delete innerStyle.value["border-color"];
    delete innerStyle.value["border-width"];
    delete innerStyle.value["border-style"];
  }
});

let canTriggerValueWatch = true;
watch(
  () => props.value,
  (v) => {
    if (!canTriggerValueWatch) return;
    canTriggerInnerStyleWatch = false;
    canTriggerColorEnable = false;
    innerStyle.value = getStyleWithDefaults(v);
    fontSize.value = getFontSize();
    bgColorEnable.value = !!innerStyle.value["background-color"];
    borderColorEnable.value = !!innerStyle.value["border-color"];
    nextTick(() => {
      canTriggerInnerStyleWatch = true;
      canTriggerColorEnable = true;
    });
  },
  {
    immediate: true,
  }
);
</script>
